<script lang="ts" setup>
import { getDepAllAPI } from '@/apis/consult';
import type { DepartmentItem } from '@/types/consult';
import { computed, ref } from 'vue';
// 1所有科室列表
const depList=ref<DepartmentItem[]>([])
// 获取所有科室
const getDepAll=async()=>{
const res=await getDepAllAPI()
depList.value=res.data
}
// 调用获取所有科室
getDepAll()
// 2. 当前选中的科室
const activeIndex=ref(0) 
// 二级科室的数据
const activeDepChild=computed(()=>{
  // 注意 ?.安全访问 层级较深的属性
  return depList.value[activeIndex.value]?.child
})
// 3.获取分步表单的页面参数
const props=defineProps<{
  type:string
  illnessType:string
}>()
console.log(props);

</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view 
      v-for="(item,index) in depList" 
      :key="item.id" 
      @click="activeIndex=index"
      :class="{active:activeIndex===index}"
      class="department-item"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/pages/description/description?depId=${item.id}&type=${props.type}&illnessType=${props.illnessType}`"
        class="department-item"
        v-for="item in activeDepChild"
        :key="item.id"
       
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './department.scss';
</style>